<template>
  <div class="user-profile-base-info">
    <el-dialog title="编辑成员信息" top="25px" lock-scroll width="640px" :visible.sync="openMemberEditer">
      <!-- 使用url来传递参数 /members/edit/${studentId} -->
      <MemberEditer @submit="alert('蛤？')" :id="studentId" />
    </el-dialog>
    <el-form :model="form" ref="form" label-width="160px">
      <el-form-item label="修改头像" v-if="false">
        <ImageUpload :imageUrl="form.portrait" @success="handleAvatarUploadSuccess" path="apply" region="oss-cn-shenzhen" bucket="tidc-drive" ossTokenUrl="https://java.cx-tidc.com/manage/ossToken/"></ImageUpload>
      </el-form-item>
      <el-form-item label="当前登陆账号">
        {{ studentId || "请先登陆" }}
      </el-form-item>
      <el-form-item label="用户名称">
        {{ name }}
      </el-form-item>
      <el-form-item label="修改个人信息">
        <el-button @click="openMemberEditer = true" :disabled="!studentId">点击修改</el-button>
      </el-form-item>
      <el-form-item label="修改密码">
        <el-button @click="handleEditPasswordClick">点击修改</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import ImageUpload from "@/components/ImageUpload";
import MemberEditer from "@/components/MemberEditer";

import storage from "@/utils/storage";
import api from "@/api";
import { mapActions, mapGetters } from "vuex";

export default {
  components: {
    ImageUpload,
    MemberEditer
  },
  data() {
    return {
      form: {
        portrait: "",
      },
      openMemberEditer: false
    };
  },
  computed: {
    ...mapGetters([
      "studentId",
      "name"
    ])
  },
  methods: {
    ...mapActions([
      "signOut"
    ]),
    handleAvatarUploadSuccess(url) {
      this.form.portrait = url;
    },
    async handleEditPasswordClick() {
      try {
        const { value } = await this.$prompt("请输入新密码", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          inputPattern: /\S{6,20}/,
          inputErrorMessage: "密码长度为6到20"
        });
        await api.updateUserForPassword(storage.get("USER"), {
          password: value
        });
        this.$message.success("修改成功");
        this.signOut();
      } catch (error) {
      }
    }
  }
};
</script>

<style lang="scss">
.user-profile-base-info {
  .el-form-item__label {
    color: #99a9bf;
  }
}
</style>
